﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css" rel="stylesheet">
        *{
        	margin:0;
        	padding:0;
        }
        .big{
        	width:200px;
        	height:200px;
        	margin:200px auto;
        	border:1px solid blue;
        }
        .small{
        	position: relative;
        	width:20px;
        	height:20px;
        	background: black;
        	/*那个元素需要动画就调用动画函数 这些参数不懂得就自己百度*/
        	animation-name: animate;
        	animation-duration: 5s;
        	animation-timing-function: ease-out;
        	animation-delay: 0s;
        	animation-iteration-count: infinite;
        	animation-direction: normal;
        	animation-play-state: running;
        }
        /*定义动画函数 注意这是css的*/
        	@keyframes animate{
        		0%{
        			top:0px;
        			left:0px;
        			border-radius: 50%;
        			background:red;

        		}
        		25%{
        			top:0px;
        			left:180px;
        		}
        		50%{
        			top:180px;
        			left:180px;
        		}
        		75%{
        			top:180px;
        			left:0px;
        		}
        		100%{
        			top:0px;
        			left:0px;
        		}
        	}
        /*----------------------end*/
        </style>
    </head>
    <body>
    	<div class="big" id="big">
    		<div class="small" id="small"></div>
    	</div>
    	<table>
    		<tr>
    			<td>
    				哈哈
    			</td>
    		</tr>
    	</table>
        <div id="x">
            <?xml version="1.0" encoding="ISO-8859-1"?>
            <note>
            <to>George</to>
            <from>John</from>
            <heading>Reminder</heading>
            <body>Don't forget the meeting!</body>
            </note>
        </div>
    	<script type="text/javascript">
    		window.onload = function (){
    			// function animate(endPosition,json,obj) {
    			// 	var animatePosition = startPosition;

    			// 	for( prop in json){
    			// 		obj[prop] = json[]
    			// 	}

    			// 	if(animatePosition < endPosition){
    			// 		setTimeout(function(){
    			// 			animate (endPosition,startPosition,json,obj)
    			// 		}, 30)
    			// 	}

    			// 	function play(obj){
    			// 		switch (obj.left)
    			// 	}
    			// }
    		}
            var s = x.innerHTML;

            var domParser = new DOMParser();

            var xml = domParser.parseFromString(s,'text/xml');
    	</script>
    </body>
</html>
